import React, { Component } from 'react';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
//注册请求
import { user_register } from '../../api/index'
import "../../styles/register/registerBox.scss"
import logo from "../../assets/cdf-logo.webp"
import BackBox from '../BackBox';

const IconStyle = {
    fontSize: '25px',
    color: '#999999'
}

class registerBox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            password: ''
        }
    }
    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    doRegister() {
        console.log(this.state);
        if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.state.phone)) {
            user_register({ phone: this.state.phone, pass: this.state.password }).then((res) => {
                console.log(res.data)
                if (res.data.code === 200) {
                    this.props.history.push('/login')
                }
            })
            this.setState({
                phone: '',
                password: ''
            })
        } else {
            alert("请输入正确的手机号")
        }

    }
    toLogin() {
        this.props.history.push('/login');
    }
    render() {
        return (
            <div className='registerBox'>
                <BackBox />
                <div className='imgBox'><img src={logo} alt="" /></div>
                <div className='textBox'>
                    <UserOutlined style={IconStyle} />
                    <input name='phone' value={this.state.phone} onChange={(e) => { this.handleChange(e) }} className='phone' type="text" placeholder='请输入手机号' />
                    
                </div>
                <div className='passwordBox'>
                    <LockOutlined style={IconStyle} />
                    <input name='password' value={this.state.password} onChange={(e) => { this.handleChange(e) }} className='pass' type="password" placeholder='请输入密码' />
                    
                </div>
                <input className='buttonBox' type="button" value='注册' onClick={() => { this.doRegister() }} />
                <div className='login' onClick={() => { this.toLogin() }}>登录</div>
            </div>
        );
    }
}

export default withRouter(registerBox);